<template>
	<view class="center">
		<view class="h1">
			欢迎登录</br>
			黑娃的记账本
		</view>
		<view class="form_div">
			<view class="form_li">
				<u--input placeholder="请输入手机号" maxlength="11" fontSize="18px" type="number" pattern="[0-9]*"
					oninput="this.value=this.value.replace(/\D/g,'');" v-model="phone" border="none"></u--input>
			</view>
			<view class="form_li">
				<u--input :password="is_password" fontSize="18px" placeholder="请输入密码" v-model="password" border="none">
					<template slot="suffix">
						<u-icon @click="is_password = !is_password" :name="is_password ? 'eye-fill' : 'eye-off'"></u-icon>
					</template>
				</u--input>
			</view>
			<view class="button_div flex_center flex_column">
				<u-button class="login" @click="login" text="立即登录" color="#5394F2"></u-button>
				<div class="register" @click="goRegister">前去注册</div>
			</view>
		</view>
	</view>
</template>

<script>
import { regExp } from "@/utils/regExp";

export default {
	components: {},
	data() {
		return {
			phone: '', //账号
			password: '',//密码
			is_password: true, //密码展示
		}
	},
	created() { },
	onLoad() { },
	methods: {
		// 校验函数返回 true 表示校验通过，false 表示不通过
		validator(val) {
			return regExp.mobilePhone.test(val);
		},
		blurFun() {
			if (!this.phone || this.phone == "") {
				this.$u.toast("请输入手机号");
				return false;
			}
			if (!this.validator(this.phone)) {
				this.$u.toast("请输入正确的手机号");
				return false;
			}
			if (!this.password || this.password == "") {
				this.$u.toast("请输入密码");
				return;
			}
			return true;
		},
		login() {
			if (!this.blurFun()) return false;
			this.$Ajax({
				url: "user/login",
				data: {
					phone: this.phone,
					password: this.password,
				},
				method: 'post'
			}).then(res => {
				const { code, data } = res;
				this.$Storage.setUserInfo(data)
				this.$Storage.setToken(data.token)
				this.$u.toast("登录成功");
				setTimeout(() => {
					uni.switchTab({
						url: '/'
					})
				}, 2000)
			})

		},
		goRegister() {
			uni.navigateTo({
				url: '/pages/login/register'
			})
		}
	}
};
</script>

<style lang="scss">
.center {
	padding: 80rpx 0 40rpx 0;
	height: 60vh;

	.h1 {
		font-size: 70rpx;
		color: #000;
		font-family: '楷体';
		padding: 0 80rpx;
		line-height: 80rpx;
		// text-align: center;
		width: 100%;
		box-sizing: border-box;
	}

	.form_div {
		margin: 18vh auto 0 auto;
		width: calc(100% - 160rpx);

		.form_li {
			margin-bottom: 40rpx;
			border:2rpx solid #ccc;
			border-radius: 10rpx;
			padding:16rpx 14rpx;
		}
	}
}

.button_div {
	margin-top: 120rpx;
	padding: 0 80rpx;

	.login {
		width: 380rpx;
		height: 90rpx;
		border-radius: 12rpx;
	}

	.register {
		margin-top: 18rpx;
		font-size: 24rpx;
		color: #1b8df7;
	}
}
</style>